<template>
    <div class="screenshots">
        <div class="title">Screenshots</div>
        <!-- 轮播 -->
        <div class="carousel-container">
            <div class="carousel-wrapper" ref="carouselWrapper">
                <div class="carousel-content" :style="{ transform: `translateX(${-scrollPosition}px)` }">
                    <div v-for="(image, index) in props.screenshots" :key="index" class="carousel-item">
                        <img
                            :src="image"
                        />
                        
                        <!-- <VerifiedImage 
                            :src="image" 
                            default-image="/img/default.png"
                            alt="示例图片"
                        /> -->
                    </div>
                </div>
            </div>
            <button class="carousel-button prev" @click="scroll('prev')" :disabled="scrollPosition <= 0">
                <el-icon><ArrowLeft /></el-icon>
            </button>
            <button class="carousel-button next" @click="scroll('next')" :disabled="scrollPosition >= maxScroll">
                <el-icon><ArrowRight /></el-icon>
            </button>
        </div>
    </div>
</template>

<script setup>
// import VerifiedImage from '@/components/VerifiedImage.vue'
const props = defineProps({
    screenshots: {
        type: Array,
        required: true
    }
})
// Carousel logic
const carouselWrapper = ref(null)
const scrollPosition = ref(0)
const maxScroll = ref(0)
const scrollAmount = 300 // 每次滚动的固定距离

onMounted(() => {
    updateMaxScroll()
    window.addEventListener('resize', updateMaxScroll)
})

onUnmounted(() => {
    window.removeEventListener('resize', updateMaxScroll)
})

const updateMaxScroll = () => {
    if (carouselWrapper.value) {
        const wrapper = carouselWrapper.value
        const content = wrapper.querySelector('.carousel-content')
        if (content) {
            maxScroll.value = content.scrollWidth - wrapper.clientWidth
            // 如果内容宽度小于容器宽度，设置为0
            maxScroll.value = Math.max(0, maxScroll.value)
        }
    }
}

// 监听截图数据变化，更新maxScroll
watch(() => props.screenshots, () => {
    // 等待DOM更新后再计算
    nextTick(() => {
        updateMaxScroll()
    })
}, { deep: true })

const scroll = (direction) => {
    if (direction === 'next') {
        scrollPosition.value = Math.min(scrollPosition.value + scrollAmount, maxScroll.value)
    } else {
        scrollPosition.value = Math.max(scrollPosition.value - scrollAmount, 0)
    }
}
</script>

<style scoped lang="scss">
  .screenshots {
    margin-top: 3rem;
    width: 100%;
    overflow: hidden;
    .title {
        @include title;
    }

    .carousel-container {
        position: relative;
        margin: 2rem 0;
        padding: 0 2rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        @media screen and (max-width: 768px) {
            padding: 0;
        }
    }

    .carousel-wrapper {
        overflow: hidden;
        margin: 0 1rem;
        max-width: calc(100% - 1rem);/* 减去左右按钮的空间 */
        @media screen and (max-width: 768px) {
            margin: 0;
        }
    }

    .carousel-content {
        display: flex;
        transition: transform 0.3s ease;
        gap: 1rem;
        @media screen and (max-width: 768px) {
            overflow-x: auto;
        }
    }

    .carousel-item {
        flex: 0 0 auto;
        /* width: 160px; */
        box-sizing: border-box;
        height: 250px;
        min-width: 140px;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        border-radius: 1rem;
        img {
            border-radius: 0.5rem;
            height: 100%;
            width: 100%;
            background: url('/img/default.png') no-repeat center center;
            background-size: 140px 250px;
        }
        .skeleton {
            width: 130px;
            height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #eeeeee54;
            border-radius: 0.5rem;
            img {
                width: 100px;
                height: unset;
            }
        }
    }

    .carousel-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: #000000;
        opacity: 0.6;
        border: 1px solid #EEEEEE;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        color: #666;
        font-size: 1.5rem;

        &.prev {
            left: 0;
        }

        &.next {
            right: 0;
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        &:not(:disabled):hover {
            background: #F78B17;
            color: white;
        }
        @media screen and (max-width: 768px) {
            display: none;
        }
    }
}
</style>